<script lang="ts" setup>
import {
    Check,
    Delete,
} from '@element-plus/icons-vue'

import { ref, onMounted } from 'vue'
import { reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import request from "../../utils/request"
import { ElMessage } from "element-plus";

//登录成功直接响应数据
onMounted(() => {
    arr()
})

const collapseData = ref([  //name相同展开的动画就是一样
    {
        bunkhouseName: '宿舍号',
        id: '1',
        issue: '内容',
    }
]);

//查询所有数据
function arr() {
    request.get("/api/Repair/all").then((re) => {
        collapseData.value = re.data
    })
}

//修改的弹窗
const visibleDrawer2 = ref(false)

//添加的弹窗
const visibleDrawer = ref(false)
//添加表单数据模型
const bunkhouseInput = ref({
    id: '',
    bunkhouseName: '',
    issue: ''
})

//添加修改/删除数据的
const bunkhouse1 = ref({
    id: '',
    bunkhouseName: '',
    issue: ''
})

//添加报修数据
function problemInput() {
    request.post("/api/Repair/problemInput", bunkhouseInput.value).then((re) => {

        if(re.data == "名字或报修内容不能为空"){
            ElMessage.error("名字或报修内容不能为空")
        }else{
             //成功后提示并刷新数据
        ElMessage.success("添加成功");
        arr();
        //添加弹框关闭并重置输入框数据
        visibleDrawer.value = false;
        bunkhouseInput.value = {
            id: '',
            bunkhouseName: '',
            issue: ''
        };
        }

    })
}

//修改页面，点击先查询id数据展示
function handleClick(id) {
    request.get("/api/Repair/inquireId?id=" + id).then((re) => {
        bunkhouse1.value = re.data
    })
    visibleDrawer2.value = true;
}

//确认后，修改数据,并返回更新后的列表
function editId() {
    request.put("/api/Repair/editId", bunkhouse1.value).then((re) => {
        if(re.data == "名字或报修内容不能为空"){
            ElMessage.error("没有改宿舍报修信息")
        }else{
            arr();
        //爆红不用理他
        ElMessage.success("修改成功")
        //关闭修改页面
        visibleDrawer2.value = false;
        }
    })
}

//删除数据
function deleteBunkhouse1(id){
    request.get("/api/Repair/deleteBunkhouse1?id="+id).then( (re) => {
        arr();
        //爆红不用理他
        ElMessage.success("删除成功")
        //关闭修改页面
        visibleDrawer2.value = false;
    })
}

//折叠
const activeName = ref('1')


const formInline = ref({
    bunkhouseName: ''
})

//宿舍号查询
const onSubmit = () => {
    request.get("/api/Repair/inquireBunkhouseName?bunkhouseName=" + formInline.value.bunkhouseName).then((re) => {
        // collapseData.value = re.data
        // console.log(collapseData.value);
        if(re.data == "查询为空"){
            ElMessage.error("没有改宿舍报修信息")
        }else{
            collapseData.value = re.data
        }

        //没有查到的提示，爆红不理
        // if((collapseData.value)[0].bunkhouseName == null){
        //     ElMessage.error("没有改宿舍报修信息")
        // }
    })
}

//弃用


//重置回到初始状态
function ons() {
    formInline.value.bunkhouseName = '';
    arr();
}









const currentPage4 = ref(1)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
var tt = ref(20)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}


//风叶数据
const activeNames = ref(['0']); // 默认展开的项，配合下面的name



</script>

<template>

    <el-card>
        <div class="card-header">
            <span>宿舍报修</span>
            <el-button type="primary" @click="visibleDrawer = true">发布</el-button>
        </div>

        <div style="margin-top: 20px;">
            <hr>
        </div>


        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="宿舍号">
                <el-input v-model="formInline.bunkhouseName" placeholder="要查询的宿舍号" clearable />
            </el-form-item>


            <el-form-item>
                <el-button class="osp" type="primary" @click="onSubmit">查看</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="ons">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 枫叶，折叠 -->
        <el-collapse v-model="activeNames" accordion>

            <el-collapse-item v-for="item in collapseData" :key="item.id" :name="item.id">
                <template #title>
                    <!-- 这个name可以改为后面的id,遍历到当前的数据拿的id  点击带id查询数据贴到文档 -->
                    <el-link :underline="false" @click="handleClick(item.id)">
                        {{ item.bunkhouseName }}
                    </el-link>
                </template>
                {{ item.issue }}
            </el-collapse-item>
        </el-collapse>

    </el-card>


    <!-- 抽屉  这个表单的:model应该改为一起的一个数据-->
    <el-drawer v-model="visibleDrawer" title="添加报修数据" direction="rtl" size="50%">
        <!-- 添加文章表单 -->
        <el-form :model="bunkhouseInput" label-width="100px">
            <el-form-item label="宿舍号">
                <el-input v-model="bunkhouseInput.bunkhouseName" placeholder="请输入宿舍号"></el-input>
            </el-form-item>
            <el-form-item label="报修内容">
                <el-input v-model="bunkhouseInput.issue" style="width: 240px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="请输入报修内容" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="problemInput">发布</el-button>
                <el-button type="info" @click="visibleDrawer = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <!-- 修改 -->
    <el-drawer v-model="visibleDrawer2" title="修改保修数据" direction="rtl" size="50%">
        <!-- 添加文章表单 -->
        <el-form :model="bunkhouse1" label-width="100px">
            <el-form-item label="宿舍号">
                <el-input v-model="bunkhouse1.bunkhouseName" placeholder="请输入宿舍号"></el-input>
            </el-form-item>
            <el-form-item label="报修内容">
                <el-input v-model="bunkhouse1.issue" style="width: 240px" :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" placeholder="请输入报修内容" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editId">修改</el-button>
                <el-button type="info" @click="visibleDrawer2 = false">取消</el-button>
                <el-button type="danger" @click="deleteBunkhouse1(bunkhouse1.id)">删除</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>




</template>

<style setup>
.el-p {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}

/* link链接图标 */
.el-link {
    margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}
</style>